<template>
    <div class="main">
                <div class="bottom-img"></div>
                <div class="bottom-content">
                    <p>OMINI.BASS</p>
                    <span>12.3w关注</span>
                </div >
                <div class="bottom-button">
                    <button @click="clickHandler($event)">关注</button>
                </div>

    </div>
</template>

<script>
    export default({
        methods:{
            clickHandler(e){
                e.currentTarget.textContent==='关注'&&( e.currentTarget.textContent='已关注')||(e.currentTarget.textContent='关注')
            }
        }
    })
</script>

<style  lang="stylus" scoped>
            .main
                margin-top 0.28rem
                display flex
                .bottom-button
                    flex 1.5

                    button
                        width 0.5rem
                        height 0.25rem
                        text-align center
                        line-height 0.2rem
                        font-size 0.13rem
                        background-color #6F60EC
                        border-radius 0.2rem
                        color #ffffff
                        margin-top 0.05rem
                        outline none
                        border none

                .bottom-content
                    flex 7
                    span
                        color #cccccc
                        font-size 0.12rem

                .bottom-img
                    background url("../../assets/img/my-back.jpg") no-repeat
                    background-size 100%
                    border-radius 50%
                    margin-right 0.1rem
                    flex 1.2

</style>